<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input id="input" type="text">
<p id="output"></p>
<button id="changeText">隐藏文本</button>
</body>
<script >
  /*可以理解为监听然后做dom操作.  vue帮我们做了.真实情况会比这个更复杂*/
  var inputElement = document.getElementById('input');
  var outputElement = document.getElementById('output');
  var changeTextButton = document.getElementById('changeText');
  var text = ''; // 普通的JavaScript变量

  // 监听输入框的变化
  inputElement.addEventListener('input', function(e) {
    text = e.target.value; // 更新变量
    updateOutput(); // 更新输出内容
  });

  // 更新输出内容的函数
  function updateOutput() {
    outputElement.textContent = text;
  }

  // 监听按钮点击事件
  changeTextButton.addEventListener('click', function() {
    text = '隐藏'; // 改变变量的值
    updateOutput(); // 更新输出内容
  });

</script>
</html>
